{% extends 'layout.html' %}

{% block content %}
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <!-- /.box-header -->
                <div class="box-body">
                    <form class="form-inline">
                        <div class="fieldset mb20 pb15">
                            <div class="legend">查询条件</div>
                            <div class="container-fluid">
                                <div class="row">
                                    <div class="form-group col-sm-4 pd0">
                                        <label class="filter-label">作业名称：</label>
                                        <input type="text" id="name" class="form-control searchInput"
                                               placeholder="请输入作业名称">
                                    </div>

                                    <div class="form-group col-sm-4 pd0" style="position: relative;">
                                        <label class="filter-label" for="exampleInputName2">创建人：</label>
                                        <input type="text" id="creater"
                                               class="form-control searchInput ui-autocomplete-input"
                                               placeholder="请输入创建人帐号" autocomplete="off">
                                        <span class="btn btn-sm btn-info" id="createrMe">我</span>
                                    </div>

                                    <div class="form-group col-sm-4 pd0" style="position: relative;">
                                        <label class="filter-label" for="exampleInputName2">最后修改人：</label>
                                        <input type="text" id="lastModifyUser"
                                               class="form-control searchInput ui-autocomplete-input"
                                               placeholder="请输入修改人帐号" autocomplete="off">
                                        <span class="btn btn-sm btn-info" id="lastModifyUserMe">我</span>
                                    </div>
                                </div>
                                <div class="row mt10">
                                    <div class="form-group col-sm-4 pd0 create-date-group">
                                        <label class="filter-label" for="exampleInputName2">创建时间：</label>
                                        <input type="text" id="createTimeStart" style="width: 100px;"
                                               class="form-control searchInput start-date hasDatepicker"
                                               placeholder="开始日期"
                                               readonly="readonly">
                                        <span style="margin-left: 5px; margin-right: 5px; ">-</span>
                                        <input type="text" id="createTimeEnd" style="width: 100px;"
                                               class="form-control searchInput end-date hasDatepicker"
                                               placeholder="结束日期"
                                               readonly="readonly">
                                    </div>

                                    <div class="form-group col-sm-4 pd0 edit-date-group">
                                        <label class="filter-label" for="exampleInputName2">修改时间：</label>
                                        <input type="text" id="lastModifyTimeStart" style="width: 100px;"
                                               class="form-control searchInput start-date hasDatepicker"
                                               placeholder="开始日期"
                                               readonly="readonly">
                                        <span style="margin-left: 5px; margin-right: 5px; ">-</span>
                                        <input type="text" id="lastModifyTimeEnd" style="width: 100px;"
                                               class="form-control searchInput end-date hasDatepicker"
                                               placeholder="结束日期"
                                               readonly="readonly">
                                    </div>
                                </div>
                                <hr class="mt10 mb15">
                                <div class="text-left">
                                    <button type="button" id="findBtn" class="btn  btn-info"><i
                                            class="fa fa-search"></i> 查询
                                    </button>
                                    &nbsp;
                                    <button type="button" id="resetBtn" class="btn btn-success"><i
                                            class="fa fa-refresh"></i> 重置
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>

                    <div class="table-responsive">
                        <table id="table">
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block self_footer_js %}
    <script>
        var $table = $('#table'),
            $remove = $('#remove'),
            selections = [];

        function initTable() {
            $table.bootstrapTable({
                method: 'get',
                url: '',
                toolbar: '#toolbar',
                //指定主键列
                idField: 'id',
                sidePagination: "server",
                //height: getHeight(),
                //设置为 true 会有隔行变色效果
                striped: true,
                //search: true,
                //showRefresh: true,
                //showColumns: true,
                //showToggle: true,
                //showPaginationSwitch: true,
                pagination: true,
                pageSize: 8,
                pageList: [10, 25, 50, 100],
                cache: false,
                clickToSelect: true,
                columns: [
                    {
                        field: 'state',
                        checkbox: true,
                        align: 'center'
                    },
                    {
                        field: 'id',
                        title: 'ID',
                        align: 'center',
                        visible: false
                    },
                    {
                        field: 'username',
                        title: '作业名称',
                        sortable: true,
                        align: 'center',
                        formatter: nameFormatter
                    }
                    , {
                        field: 'name',
                        title: '步骤数',
                        align: 'center'
                    }

                    , {
                        field: 'group',
                        title: '创建人',
                        align: 'center'
                    }
                    , {
                        field: 'role',
                        title: '最后修改人',
                        align: 'center'
                    }
                    , {
                        field: 'hostnum',
                        title: '创建时间',
                        align: 'center'
                    }
                    , {
                        field: 'email',
                        title: '最后修改时间',
                        align: 'center'
                    }, {
                        field: 'operate',
                        title: '操作',
                        align: 'center',
                        events: operateEvents,
                        formatter: operateFormatter
                    }

                ]
            })
        }

        function getHeight() {
            return $(window).height() - $('h1').outerHeight(true);
        }

        function nameFormatter(value, row, index) {
            return [
                '<a href="{% url 'user_profile' %}?uid=' + row.id + '">',
                value + '</a>',
            ].join('');
        }

        //操作列方法
        function operateFormatter(value, row, index) {
            return [
                '<a class="btn btn-xs btn-default" href="{% url 'user_edit' %}?id=' + row.id + '">',
                '<i class="fa fa-edit"></i> 编辑</a> ',
                '<a class="remove btn btn-xs btn-danger" href="javascript:void(0)" title="Remove">',
                '<i class="fa fa-trash-o"></i> 删除',
                '</a>'
            ].join('');
        }

        window.operateEvents = {
            'click .remove': function (e, value, row, index) {
                BootstrapDialog.confirm({
                    title: "警告",
                    type: BootstrapDialog.TYPE_WARNING,
                    message: "确定删除用户 <span class='red'>" + row.name + "</span> 吗？",
                    draggable: true,
                    btnCancelLabel: '放弃',
                    btnCancelClass: 'btn-white',
                    btnOKLabel: '确认',
                    callback: function (result) {
                        if (result) {
                            var ids = [row.id];
                            $.post("{% url 'user_del' %}", {ids: ids}, function (data) {
                                    if (data.code != 0) {
                                        $table.bootstrapTable("refresh");
                                        dialogItself.close();
                                    }
                                    else BootstrapDialog.alert(data.message);

                                }, "json"
                            );
                        }
                    }
                });
            }
        };

        $(function () {
            //初始化表格
            initTable();

            // delete button
            $("#btn_remove").click(function () {
                var selected = $table.bootstrapTable('getSelections');
                if ($(selected).length > 0) {
                    BootstrapDialog.confirm({
                        title: "警告",
                        message: "确定删除选中的" + $(selected).length + "个用户吗？",
                        type: BootstrapDialog.TYPE_WARNING,
                        btnCancelLabel: '放弃',
                        btnCancelClass: 'btn-white',
                        btnOKLabel: '确认',
                        //btnOKClass: 'btn-default',
                        callback: function (result) {
                            if (result) {
                                var ids = new Array($(selected).length);
                                $.each(selected, function (index, value) {
                                    ids[index] = value.id;
                                });
                                $.post("{% url 'user_del' %}", {ids: ids}, function (data) {
                                        if (data.code != 0) {
                                            $table.bootstrapTable("refresh");
                                            dialogItself.close();
                                        }
                                        else BootstrapDialog.alert(data.message);

                                    }, "json"
                                );
                            }
                        }
                    });
                }
                else BootstrapDialog.warning("请选择要删除的行");
            });
        });
    </script>
{% endblock %}